{% extends "base/base-sidebar.html" %}

{% block title %}MMO Checker{% endblock %}

{% block main %}
    <section class="pla-section-results">
        <div data-pla-messages></div>
        <div class="pla-results" data-pla-results>
            <p class="pla-results-message">This tool was created by Cappy, with help from Anubis, Kurt, Lincoln, Zyro and Santacrab420 for code and other assistance.</p>
        </div>
    </section>
{% endblock %}

{% block head %}
	<script type="text/javascript" src="static/js/jquery.min.mjs"></script>
	<script>
	$(document).ready(function(e){
		function get_json_data(id, parent_id) {
			var html_code = '';
			$.getJSON('static/resources/seedhashes.json', function(data) {
				html_code += '<option value="">Select Species</option>';
				$.each(data, function(key, value) {
					if (value.parent_id == parent_id) {
						html_code += '<option value="' + value.hash + '">' + value.species + '</option>';
					}
				});
				$('#' + id).html(html_code);
				$('#' + id).trigger("chosen:updated");
			});
		}
		get_json_data('frpokemon',0);

		$(document).on('change', '#frpokemon', function() {
			var brand_id = $(this).val();
			if (brand_id != '') {
				get_json_data('brpokemon', brand_id);
			} else {
				$('#brpokemon').html('<option value="">Select Second Round Species</option>');
			}
		})

		$(document).on('change', '#normalcheckbox', function() {
			var outbreaktype = $(this).prop('checked');
			var html_code2 = '';
			if (outbreaktype) {
				for(i = 10; i <=15; i++) {
					html_code2 += '<option value="' + i + '">' + i + '</option>';
				}
				get_json_data('frpokemon',-1);
			} else {
				for(i = 8; i <=10; i++) {
					html_code2 += '<option value="' + i + '">' + i + '</option>';
				}
				get_json_data('frpokemon',0);
			}
			$('#frspawns').html(html_code2);
		});
		
	$(function() {
	$(".chosen-select").chosen({
		no_results_text: "Oops, nothing found!",
		inherit_select_classes: true
	});
	
	$(".chosen-select-single").chosen({
		width: "75%",
		inherit_select_classes: true
		
	});
		
	/*$('#frpokemon').chosen().change(function() {
		var brand_id = $(this).val();
			if (brand_id != '') {
				get_json_data('brpokemon', brand_id);
			} else {
				$('#brpokemon').html('<option value="">Select Second Round Species</option>');
			}
		});*/
		
	});
	});
	</script>
{% endblock %}

{% block sidebar %}
    <section class="pla-section-options">
        <div class="pla-control">
            <label for="inputseed">Seed</label>
            <input type="number" id="inputseed" placeholder="Input Seed">
        </div>

        <div class="pla-control-spaced">
            <label for="normalcheckbox">Normal Outbreaks Only</label>
            <input type="checkbox" id="normalcheckbox">
        </div>

        <div class="pla-control">
            <label for="frspawns">First Round Spawns</label>
            <select id="frspawns">
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </div>

        <div class="pla-control">
            <label for="frpokemon">First Round Pokemon</label>
            <select name="frpokemon" id="frpokemon" class="form-control chosen-select-single">
                <option value="">Select Pokemon</option>
            </select>
        </div>

        <div class="pla-control-spaced">
            <label for="bonus">Bonus Round?</label>
            <input type="checkbox" id="bonus">
        </div>

        <div class="pla-control" data-pla-bonus-round>
            <label for="brspawns">Bonus Round Spawns</label>
            <select id="brspawns">
                <option value="6">6</option>
                <option value="7">7</option>
            </select>
        </div>

        <div class="pla-control" data-pla-bonus-round>
            <label for="brpokemon">Bonus Round Pokemon</label>
            <select name="brpokemon" id="brpokemon" class="form-control chosen-select-single">
                <option value="">Select Pokemon</option>
            </select>
        </div>

        <!--
        <div class="pla-control-spaced">
            <label for="inmapcheck">In Area: (Not Currently Functional)</label>
            <input type="checkbox" id="inmapcheck">
        </div>-->
		
		<div class="pla-control">
			<label for="selectfilter">Select Filter:</label>
			<select id="selectfilter">
				<option value="is_shiny">Shiny Only</option>
				<option value="is_square_shiny">Square Shiny Only</option>
				<option value="is_alpha">Alpha Only</option>
				<option value="is_perfect">6IV Only</option>
				<option value="has_5ivs">5+IV Only</option>
				<option value="no_attack">0 Attack IV Only</option>
				<option value="has_no_attack_5iv_over_30">0 Attack IV, 5IV 30+ Only</option>
				<option value="has_no_attack_5iv">0 Atk, 5IV Only</option>
				<option value="no_speed">0 Speed IV Only</option>
				<option value="has_no_speed_5iv_over_30">0 Speed IV, 5 IV 30+ Only</option>
				<option value="has_no_speed_5iv">0 Speed IV, 5IV Only</option>
				<option value="has_6iv_over_30">6 IVs 30+ Only</option>
				<option value="has_5iv_over_30">5 IVs 30+ Only</option>
				<option value="has_no_speed_no_attack">0 Speed and 0 Attack IV Only</option>
				<option value="has_no_speed_no_attack_4iv_over_30">0 Speed and 0 Attack IV, 4IV 30+ Only</option>
				<option value="has_no_speed_no_attack_4iv">0 Speed and 0 Attack IV, 4IV Only</option>
			</select>
		</div>

        <div class="pla-control-actions">
            <button class="pla-button pla-button-action" id="pla-button-checkmmos">Check MMO Seed</button>
        </div>
    </section>

    <section>
        <!--<div class="pla-control-spaced">
            <label for="mmoShinyFilter">Shiny or Alpha</label>
            <input type="checkbox" id="mmoShinyOrAlphaFilter">
        </div>-->

        <div class="pla-control-spaced">
            <label for="mmoShinyFilter">Results Filter: Shiny Only</label>
            <input type="checkbox" id="mmoShinyFilter">
        </div>

        <div class="pla-control-spaced">
            <label for="mmoAlphaFilter">Results Filter: Alpha Only</label>
            <input type="checkbox" id="mmoAlphaFilter">
        </div>

        <div class="pla-control-spaced">
            <label for="mmoDefaultRouteFilter">Results Filter: Show Default Paths Only</label>
            <input type="checkbox" id="mmoDefaultRouteFilter">
        </div>
		
		<div class="pla-control-spaced">
            <label for="mmoDefaultRouteFilter">Results Filter: Show Multiple Shiny Paths Only</label>
            <input type="checkbox" id="mmoMultiFilter">
        </div>
    </section>
{% endblock %}

{% block templates %}
    <template data-pla-results-template>
        <div class="pla-results-item" data-pla-results-template>
            <ul class="pla-results-heading pla-results-ul">
				<li class="pla-results-sprite" data-pla-results-sprite></li>
                <li class="pla-results-species" data-pla-results-species></li>
                <li><span class="pla-results-mapname" data-pla-results-mapname></span></li>
            </ul>

            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Shiny:</span> <span class="float -left" data-pla-results-shinysprite> <span class="float -right" data-pla-results-shiny></span></span></li>
                <li><span class="pla-results-label">Alpha:</span> <span data-pla-results-alpha></span></li>
            </ul>

			<ul class="pla-results-ul">
				<li><span class="pla-results-label"><span data-pla-results-location></span></span></li>
			</ul>
			<ul class="pla-results-ul">
				<span class="pla-results-label">Chained With: <span data-pla-info-chains></span></span>
			</ul>
            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Nature:</span> <span data-pla-results-nature></span></li>
                <li><span class="pla-results-label">Gender:</span> <span data-pla-results-gender></span></li>
                <li><span class="pla-results-label">Rolls:</span> <span data-pla-results-rolls></span></li>
            </ul>

            <!--<ul class="pla-results-ul">
                <li><span class="pla-results-label">Seed:</span> <span data-pla-results-seed></span></li>
                <li><span class="pla-results-label">EC:</span> <span data-pla-results-ec></span></li>
                <li><span class="pla-results-label">PID:</span> <span data-pla-results-pid></span></li>
            </ul>-->

            <div class="pla-results-ivs-container">
                <span class="pla-results-label">IVs:</span>
                <ul class="pla-results-ivs">
                    <li class="pla-results-ivs-hp" data-pla-results-ivs-hp></li>
                    <li class="pla-results-ivs-att" data-pla-results-ivs-att></li>
                    <li class="pla-results-ivs-def" data-pla-results-ivs-def></li>
                    <li class="pla-results-ivs-spa" data-pla-results-ivs-spa></li>
                    <li class="pla-results-ivs-spd" data-pla-results-ivs-spd></li>
                    <li class="pla-results-ivs-spe" data-pla-results-ivs-spe></li>
                </ul>
            </div>
        </div>
    </template>
{% endblock %}

{% block script %}
    <script type="module" src="{{ url_for('static', filename='js/seeds.js') }}"></script>
{% endblock %}